import { CommonComponentProps } from "@/pages/lowCodeEditorPlus/interface";
import { useMaterialDrop } from "@/pages/lowCodeEditorPlus/hooks/useMaterialDrop";
import { useMemo } from "react";
import { accept } from "./setter";

function Page({ id, children, aside, showAside, styles }: CommonComponentProps) {
  const {canDrop, drop } = useMaterialDrop(accept.body, id)
  const {canDrop: asideCanDrop, drop: asideDrop } = useMaterialDrop(accept.aside, id, "aside")
  const asideDisplayStyle = useMemo(() => {
    return showAside ? "p-4 w-48 mr-3" : "w-0 p-0 mr-0 scale-x-0 opacity-0 -translate-x-1/2";
  }, [showAside]);
  return (
    <div data-component-id={id} className="flex h-full">
      <aside
        ref={asideDrop}
        data-component-id={id}
        data-component-unit-type="aside"
        className={`asideContentMark ${asideDisplayStyle} bg-white`}
      >
        {asideDisplayStyle ? aside : null}
      </aside>
      <main
        ref={drop}
        data-component-id={id}
        data-component-unit-type="body"
        className="mainContentMark flex-1 w-10 bg-white p-4 overflow-y-auto"
      >
        {children}
      </main>
    </div>
  );
}

export default Page;
